<template>
  <div class="news-content">
    <div class="container">
      <div class="left">
        <div class="left-body">
          <div
          v-for="item of 8"
          class="left-item">招生政策</div>
        </div>
      </div>
      <div class="right" :style="{'height':center_height!=0?center_height+'px':'auto'}">
        <!-- 数据记录 -->
        <div class="num-body">
          <div class="num-item">
            <div class="num-item-name">浏览数</div>
            <div class="num-item-num">6,684,406</div>
          </div>
          <div class="num-item">
            <div class="num-item-name">精华内容</div>
            <div class="num-item-num">6,684,406</div>
          </div>
        </div>
        <!--  -->
        <div style="margin-bottom: 20px;">
          <app-detail-list></app-detail-list>
        </div>
        <!--  -->
        <div style="margin-bottom: 20px;">
          <app-detail-icon></app-detail-icon>
        </div>
        <!--  -->
        <div style="margin-top: 20px;" class="form">
          <swiper :sw_params="sw_params" height="106px"></swiper>
          <app-detail-form></app-detail-form>
          <!--  -->
          <div style="margin-top: 20px;">
            <app-detail-footer></app-detail-footer>
          </div>
        </div>



      </div>
      <div class="center" ref="center">

        <div class="tag-body">
          <div class="tag-item active">测试</div>
          <div class="tag-item" v-for="item of 8">测试测试</div>
        </div>
        <div class="news-body">

          <a class="news-item" v-for="item of 28" href="/news/1" target="_blank">
            <h1 class="news-title">湖南专升本公办、民办、私立院校三者有什么区别？</h1>
            <!-- <div class="news-bot">
              <div class="bot-left">
                <el-image fit="cover" class="img" src="http://oss.cswendu.com/pc.cswendu.com/fixed-img-for-js/test.png"></el-image>
                <p>小李老师</p>
              </div>
              <p class="bot-center WordJustOneLine">大家好，我是辣条。有粉丝朋友私信我要上大学了上大学了上大学了有粉丝朋友私信我要上大学了上大学了上大学了</p>
              <div class="bot-right">
                <el-image fit="cover" class="img" src="/hitt.png"></el-image>
                <p>150</p>
              </div>
            </div> -->

            <div class="news-bot">
              <el-image fit="cover" class="img" src="http://oss.cswendu.com/pc.cswendu.com/fixed-img-for-js/test.png"></el-image>
              <p class="name">小李老师</p>
              <p class="bot-center">大家好，我是辣条。有粉丝朋友私信我要上大学了上大学了上大学了有粉丝朋友私信我要上大学了上大学了上大学了</p>
              <div class="bot-right">
                <el-image fit="contain" class="img" src="/hitt.png"></el-image>
                <p>150</p>
              </div>
            </div>
          </a>


        </div>


      </div>
    </div>
  </div>
</template>

<script>
import appDetailIcon from '@/components/app-detail-icon.vue'
import appDetailList from '@/components/app-detail-list.vue'
import appDetailForm from '@/components/app-detail-form.vue'
import swiper from '@/components/swiper.vue'
import appDetailFooter from '@/components/app-detail-footer.vue'
export default {
  name:'news-index',
  components:{
    appDetailFooter,
    appDetailIcon,
    appDetailList,
    appDetailForm
  },
  async asyncData({app,$axios}){

    // console.log(app)
  },
  data(){
    return{
      sw_params:{
        logoOption: {//swiper配置
              loop: true,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
              },
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
              autoplay: {
                delay: 1000,
              }
        },
        data:[
          {
            url:'http://oss.cswendu.com/pc.cswendu.com/fixed-img-for-js/test.png'
          }
        ]
      },
      center_height:0
    }
  },
  methods:{
    getCenterHeight(){
      console.log(this.$refs.center.offsetHeight)
      this.center_height = this.$refs.center.offsetHeight
    }
  },
  mounted() {
    this.getCenterHeight()
  }
}
</script>

<style scoped="scoped" lang="scss">
/* .diss{
  width: 500px;
  height: 500px;
  background: url('~static/1.png') repeat;
}
 */
.news-item{
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #F5F6F7;
  cursor: pointer;
  transition: all 0.3s;
  display: block;
  &:hover{
    box-shadow: 0 0 20px 0 #d1d1d1cc;
    background: #fafafa;
    .news-title{
      color: $active_color;
    }
  }
  .news-title{
    font-size: 18px;
    color: $text1_color;
  }
  // .news-bot{
  //   justify-content: space-between;
  //   display: flex;
  //   margin-top: 10px;
  //   align-items: center;
  //   .bot-left{
  //     width: 130px;
  //     display: flex;
  //     align-items: center;
  //     .img{
  //       width: 30px;
  //       height: 30px;
  //       border-radius: 30px;
  //     }
  //     p{ margin-left: 5px;
  //       font-size: 16px;
  //       color: #595757;
  //     }
  //   }
  //   .bot-center{
  //     font-size: 14px;
  //     color: #898989;
  //     width: 480px;
  //   }
  //   .bot-right{
  //     padding-left: 20px;
  //     display: flex;
  //     align-items: center;
  //     p{
  //       margin-left: 5px;
  //       font-size: 14px;
  //       color: #6c77e8;
  //     }
  //   }
  // }
  .news-bot{
    align-items: center;
    margin-top: 10px;
    display: flex;
    .img{
      width: 24px;
      height: 24px;
      border-radius: 24px;
      overflow: hidden;
      // background-color: black;
      margin-right: 10px;
    }
    .name{
        max-width: 120px;
        @include _one-line();
    }
    .bot-center{
          flex: 40;
          padding-left: 16px;
          color: #8a8a8a;
          font-size: 14px;
          line-height: 24px;
          @include _one-line();
          padding-top: 2px;
    }
    .bot-right{
      line-height: 24px;
      -webkit-box-flex: 1;
      flex: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .img{
        width: 20px;
      }
      p{
        color: #349edf;
        font-size: 14px;
      }
    }
  }
}
.num-body{
  margin-bottom: 20px;
  display: flex;
  padding: 20px;
  background-color: white;
  justify-content: space-around;
  position: relative;
  &::after{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 50%;
    background-color: #c9caca;
    width: 1px;
    height: 36px;
  }
  .num-item{
    align-items: center;
    .num-item-name{
      font-size: 16px;
      color: #676776;
      text-align: center;
    }
    .num-item-num{
      font-size: 18px;
      font-weight: bold;
      color: #000000;
      text-align: center;
    }
  }
}

.news-content{
  background-color: #F5F6F7;
  min-height: 2080px;
}
.container{
  padding-top: 20px;
}
.left{
  width: 120px;
  background-color: white;
  // height: 100px;
  float: left;
  position: sticky;
  left: 0;
  top: 156px;
}
.form{
  position: sticky;
  right: 0;
  top: 156px;
}
.right{
  width: 288px;
  // background-color: white;
  // height: 100px;
  float: right;
}
.center{
  width: 760px;
  margin-left: 136px;
  background-color: white;
  .tag-body{
    background-color: #f2f2f2;
    padding: 10px 5px 0 5px;
    display: flex;
    flex-wrap: wrap;
    .tag-item{
      font-size: 14px;
      color: $text1_color;
      padding:0 20px;
      background-color: white;
      border-radius: 30px;
      height: 30px;
      line-height: 30px;
      margin-right: 10px;
      margin-bottom: 10px;
      transition: all .3s;
      cursor: pointer;
      &.active{
        color: white;
        background-color: $active_color;
      }
      &:hover{
        color: white;
        background-color: $active_color;
      }
    }
  }
}
.left-body{
  .left-item{
    font-size: 16px;
    color: $text1_color;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: white;
    border-top: 2px solid #f8f8f8;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
    &:first-child{
      border-top: none;
    }
    &.active{
      background-color: $active_color;
      color: white;
    }
    &:hover{
      background-color: $active_color;
      color: white;
    }
  }
}
</style>
